@charset "utf-8";
/* CSS Document */

/* container开始*/
.container{
margin: 0 auto;
width: 100%;
position:relative;
top:250px;
padding-top:0px;

}

.container #notice{
width: 100%;
height: 50px;

}
#notice .content ul{
width: 100%;

}
#notice .content ul li{
	line-height: 50px;
	float: left;
	margin-right: 50px;
	display:in-block;
}

#notice .content ul li .fa {
	margin-right: 15px;
	font-size: 16px;
	color: #999;

	
}

#notice .content ul li a{
	color: #888;
}
#notice .content ul li a:hover{
	color: #00c3b6;
	list-style: bengali;
	text-decoration: underline;
}

.slider{
	width: 100%;
	height:310px;
	background-color: white;	
}

/*轮播图开始*/
.container .content .carousel {
	width: 620px;
	height: 250px;
	position: absolute;
	margin-top: 30px;
	float: left;

}

#container_1{
		width: 620px; 
		height:250px; 
		position:relative; 
		overflow:hidden;
	}

	#list{
		width:4340px; 
		height:250px; 
		position:absolute;
		top:0; 
		left:0;
	}

	#list img{float:left;}

	#buttons{
		width:85px; 
		height:12px; 
		position:absolute; 
		left:266px; 
		bottom:20px;}

	#buttons span{
		width:6px; 
		height:6px; 
		float:left; 
		border:1px solid white; 
		border-radius:10px; 
		margin-right:5px; 
		cursor:pointer;}

	.on{background-color:white;}

	.arrow{
		width: 30px;
		height: 45px; 
		background-color:rgba(0,0,0,0.7); 
		color:white; 
		font-size:22px;
		font-weight:bold; 
		line-height:45px; 
		text-align:center; 
		position:absolute; 
		top:105px; 
		/* display:none; */ 
		cursor:pointer;
		overflow: hidden;
		z-index:2;
		/*-webkit-transform:translateX(-50px);
	    transform:tanslateX(-50px);
	   -webkit-transition: 0.2s -webkit-transform  cubic-bezier(0, 0.33, 0.2, 1);
	    transition: 0.2s transform cubic-bezier(0, 0.33, 0.2, 1); */
	}

.arrow:hover{
	 background-color: #00c3b6;
	
}

#container_1:hover #prev{
	transform:translateX(0px);
    -webkit-transform:translateX(0px);
}

/*#container_1:hover .arrow{
	display:block;
	transform:translateX(0px);
    -webkit-transform:translateX(0px);
    }*/

#prev{
	-webkit-transform:translateX(-50px);
	 transform:tanslateX(-50px);
	 -webkit-transition: 0.2s -webkit-transform  cubic-bezier(0, 0.33, 0.2, 1);
	 transition: 0.2s transform cubic-bezier(0, 0.33, 0.2, 1); 
	 left:0;
}

#next{
	-webkit-transform:translateX(50px);
	    transform:tanslateX(50px);
	   -webkit-transition: 0.2s -webkit-transform  cubic-bezier(0, 0.33, 0.2, 1);
	    transition: 0.2s transform cubic-bezier(0, 0.33, 0.2, 1);
	right:0;
	}


#container_1:hover #next{
	transform:translateX(0px);
    -webkit-transform:translateX(0px);
}



/* 轮播右边图片 */
.slider .img1{
	margin-top: 30px;
	float: left;
	width: 300px;
	height: 250px;
    margin-left:640px; 
	
	
}
.slider .img2{
	margin-top: 30px;
	float:right;
	width: 300px;
	height: 250px;
	
	
} 


/*中间图片内容开始*/
.container .cool{
	width: 100%;
	margin-top: 30px;
}
 .cool .content ul{
	width: 100%;
	margin-top: 0px;


}

 .cool .content ul li{
    display: block;
    width:100%;
    height: 250px;
    
    padding-bottom: 30px;
   
}

.cool .content ul li ul #pic{
	position:absolute;
	width:100%;
	height: 250px;
	 
	
}

#pic li {
	display: block;
    height: 249px;
    width:24.8%;
	float: left;
	display:flex;  /*子元素居中*/
    justify-content:center;  
    align-items:center;

    
 


	
}
 #pic li .item{
	border: 1px solid red;
	margin:auto 10px; 
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
     overflow: hidden;
    position: relative;
    border: 10px solid #fff;
    border-bottom: 0 none;
    -webkit-transition:0.2s all linear;
    transition:0.2s all linear; 
}

 #pic li .item .thumb img{
	 width: 100%;
     display: block;
     -webkit-transition: 0.2s all cubic-bezier(0.33, 0, 0.2, 1);
    transition: 0.2s all cubic-bezier(0.33, 0, 0.2, 1); 


}
 #pic li .item .meta{
	padding:6px 5px;
}

 #pic li .item .meta .title a{
	font-weight: normal;
	color: #444;
    font-size: 12px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
 #pic li .item .meta .extra{
	 position: absolute;
    left: 0;
    top:0;
    height: auto;
    overflow: hidden;
    width: 100%;
    background-color: #222;
    color: #FFF;
    padding: 10px 10px;
   -webkit-box-sizing:border-box;
   box-sizing: border-box;
   -webkit-transform:translateY(-50px);
   transform:tanslateY(-50px);
   -webkit-transition: 0.2s -webkit-transform  cubic-bezier(0.33, 0, 0.2, 1);
   transition: 0.2s transform cubic-bezier(0.33, 0, 0.2, 1); 

}

 #pic li .item .meta .extra  i{
    margin-right: 4px;
}

 #pic li .item .meta .extra span{
   float: right;
   margin-right: 14px;

}
 #pic li .item .meta .extra span i{
	margin-left: 4px;
}



 #pic li .item .data{
	 border-top: 1px solid #f2f2f2;
    padding: 5px 5px;
    color: #999;
}

 #pic li .item .data span{
	float: right;
	margin-left: 10px;
	color: #999;

}

 #pic li .item:hover .meta .extra{
	 transform:translateY(0px);
    -webkit-transform:translateY(0px);
}

 #pic li .item .thumb a img{
   /*  margin-top: 10px; */
}

 #pic li .item:hover{
	 box-shadow: 0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
    transform:translateY(10px);
}




/*上下数字页开始*/

.pagination{
	margin: 0 auto;
	width: 100%;
	height:36px;
	position: absolute;
	
	

}

.pagination .content ul{
	width:358px;
	height: 36px;
	margin: 0 auto;
	

}
.pagination .content ul li{
	width:36px ;
	height:36px;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	display:block;
	float: left;
	padding-right: 2px;
	margin-right:3px;
}

 #borders_number1{
	width:36px ;
	height:36px;
	border-radius: 4px;
	background-color: #00c3b6;
	text-align: center;
	line-height: 36px;
	display:block;
	color:white;


	}
	
 #borders_number2{
	width:36px ;
	height:36px;
	border-radius: 4px;
	background-color:white;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;
	
	}

 #borders_number2:hover{
	background-color: #00C3B6;
	color: white;
}

 #borders_number3{
	width:36px ;
	height:36px;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;


	}
#borders_number4{
	width:36px ;
	height:36px;
	border-radius:4px;
	background-color:white;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;
	
	}
 #borders_number4:hover{
	background-color: #00C3B6;
	color: white;
}

 #borders_number5{
	width:36px ;
	height:36px;
	border-radius: 4px;
	background-color:white;
	font-size:14px;
	font-weight:30px;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;
	
	}
#borders_number5:hover{
	background-color: #00C3B6;
	color: white;
}

 #borders_number6{
	width:48px ;
	height:36px;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;

	}
 #borders_number7{
	width:88px ;
	height:36px;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;
	border: 1px solid #d8d8d8;
	

	}

 #borders_number7 input{
	width:48px ;
	height:36px;
	border-radius: 4px;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;
	float: left;
	outline: none;
	margin-right:3px;
	border: 0 none;
	background-color: #FFF;

	}
 #borders_number8 {
	width:36px ;
	height:36px;
	border-radius: 4px;
	background-color:white;
	text-align: center;
	line-height: 36px;
	display:block;
	color: #999;
	float: left;
	
	
	}
 #borders_number8:hover{
	background-color: #00C3B6;
	color: white;
}

/*大图片开始*/
#love{
	background: url(../images/love-bg.jpg) center bottom repeat fixed;
	margin: 0 auto;
	width: 100%;
	position: absolute;
	margin-top: 70px;
	
}

#love .content ul {
	width: 100%;
	height: 630px;
	margin: 0 auto;
}

#love .content ul  li{
	width:25%;
	height: 262px;
	margin-top:3px;
	float: left;
	overflow: hidden;
	position: relative;
	display:flex;  /*子元素居中*/
    justify-content:center;  
    align-items:center;
     
}



#love .content ul  li :hover{
	opacity: 0.8;
	transition:all 0.15s;
	-moz-transition:all 0.15s;
	-webkit-transition:all 0.15s; 
	-o-transitionall:all 0.15s; 
	transform: scale(2, 2);

	
} 

#love .content ul  li img{
	width: 100%;
	height: 100%;
}

 .small_box{
	height:40px;
	width:40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -20px;
    display:flex;  /*子元素居中*/
    justify-content:center;  
    align-items:center;
    opacity: 0;

}
/*#love .content ul li a .small_box:hover  {
	width:50px;
	height:50px; 
	position: absolute;
	opacity: 0.9;
 transition:all 0.15s;
	-moz-transition:all 0.15s;
	-webkit-transition:all 0.15s; 
	-o-transitionall:all 0.15s; 
	transform: scale(2, 2); 
}*/


 .small_box .fa{
	font-size: 40px; 
	color: #fff;
	font-weight: 50px; 
}

 .big_mark{
	width:100%;
	height:100%; 
	opacity:0;
	background-color:#00c3b6;
	overflow: hidden;
	margin:0 auto;
	position: absolute;
	top:0;
	left:0;
	 z-index: 10;

/* 	-webkit-transform: scale(2, 2);
  transform: scale(2, 2);
  z-index: 20; */
}

 .big_mark:hover{ 
	    z-index:10; 
	    opacity: 0.7;
	  	/* transition:all 1s;
	  	-moz-transition:all 1s;
	  	-webkit-transition:all 1s; 
	  	-o-transition:all 1s; 
	  	transform: scale(2, 2);  */
}
.big_mark:hover .jiaoben_box{
	transform:translateY(0px);
    -webkit-transform:translateY(0px);
}
.jiaoben_box{
	width: 100%;
	height: 55px;
	position: absolute;
	bottom: 0;
	left: 0;
 	overflow: hidden; 
	background-color: rgba(0,0,0,0.5);
	color: #FFF;
	z-index: 30;
	padding-left:10px;
	margin-top: 20px;
	color:#fff;
	-webkit-transform:translateY(60px);
	 transform:tanslateY(60px);
	-webkit-transition: 0.2s -webkit-transform  cubic-bezier(0.33, 0, 0.2, 1);
	transition: transform 0.2s cubic-bezier(0.33, 0, 0.2, 1); 
} 
.jiaoben_box .extra {
	font-size:12px;
	color: #fff;
	margin-top:8px;
}

 .jiaoben_box .extra span{
	float: right;
	margin-right: 12px;
	color:#fff;
}

#love .content ul li:hover .jiaoben_box{
	transform:translateY(0px);
    -webkit-transform:translateY(0px);
}


#love .content .buttons{
	width: 253px;
	height: 37px;
	position: absolute;
	top:560px;
	left: 42%;

	
	
	
}
#love .content .buttons a{
	background: #00c3b6;
    display: inline-block;
    font-size: 14px;
    padding: 8px 25px;
    border-radius:20px;
    color: #FFF;
    position: absolute;
    
	
}
#love .content .buttons a:hover{
	background:#ea4c89 ;
}


/*大图片结束*/



/*用户信息开始*/



.user_masige {
	width: 100%;
	height: 261px;
	background-color: white;
	position:relative;
	top:703px;
	margin: 0 auto;
}

.user_masige .content ul{
	width: 100%;
    height: 100%;
    overflow: hidden;

    
}

.user_masige .content ul li{
	width:33.1%;
	height: 100%;
    float: left;
    text-align: center;
    padding-top: 40px;
 
}

.user_masige .content ul p {
	width:80px;
	height: 80px;
	border-radius: 50%;
	background-color: #00a398;
	line-height: 80px;
	margin-left: 40%;

}
.user_masige .content ul p .fa {
	color: #fff;
	line-height: 80px;
	font: normal normal normal 30px/1 FontAwesome;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  	transform: translate(0, 0);
	padding-top: 25px;

}

.user_masige .content ul h2{
  color: #00c3b6;
  font-weight: normal;
  font-size: 18px; 
  margin-top: 15px;
}

.user_masige .content ul li h3{
  font-weight: normal;
  font-size:12px; 
  margin-top: 13px;
}

/*用户信息结束*/




#feature {
	width: 100%;
    height:200px;
   
    margin: 0 auto;
  
}

#feature  ul{
	display: block;
	width: 100%;
	height: 200px;
	position:relative;
	top:705px; 	
	background-color:#FFFFFF; 
	
}

#feature  ul li{
	float: left;
	width: 24.80%;
	height: 100%;
	display: block;
	margin-left:2px;
	background-color:#fff; 
	overflow: hidden;


}






